<template>
  <view class="container">
    <uni-nav-bar title="" rightIcon="true" backgroundColor='#227AFF' :border="false" @clickLeft="$toPage('../user/user')">
      <view slot="left" class="headimg u-f-ac">
        <image :src="faceBaceUrl?faceBaceUrl:'../../static/img/user/default.png'"></image>
      </view>
    </uni-nav-bar>
    <view class="main">
      <image class="fontimg" src="/static/index/banner.png"></image>
      <view class="homeModel u-f-ac">
        <view class="u-f u-f-ajc" style="flex-wrap: wrap;">
          <block v-for="(item,index) in homeIcon" :key="index">
            <view class="main_box" @click="$toPage(item.url)">
              <!-- <text class="title web-font">{{item.name}}</text> -->
              <image :src="item.icon"></image>
            </view>
          </block>
        </view>
      </view>

      <!-- <view @click="back">退出</view> -->
    </view>
    <uni-popup ref="popShare" type="center">
      <uni-popup-message title="有新版本可以更新" :message="`当前版本${localVersion} ，最新版本${Version}`" @close="close"></uni-popup-message>
    </uni-popup>
  </view>
</template>

<script>
  import {
    mapState,
    mapMutations,mapActions
  } from 'vuex'
  export default {
    computed: { ...mapState(['userInfo', 'faceBaceUrl'])
    },
    data() {
      return {
        homeIcon: [{
            icon: '../../static/index/01.png',
            name: '专题讲座',
            url: './subject/subject'
          },
          {
            icon: '../../static/index/02.png',
            name: '一课一练',
            url: './testPaper/testPaper'
          },
          {
            icon: '../../static/index/03.png',
            name: '错题集',
            url: './wrong/wrong'
          }, {
            icon: '../../static/index/04.png',
            name: '考前冲刺',
            url: './sprint/sprint'
          }
        ],
        mac: '',
        Version: 100,
        localVersion: 0
      }
    },
    mounted() {
      // 获取应用版本号
      this.localVersion = plus.runtime.versionCode
      this.getVersion()
    },
    methods: {
      ...mapMutations(['setUserInfo']),
      ...mapActions(['setSubjectListAsync']),
      back() {
        uni.setStorageSync('user', '')
        this.setUserInfo(false)
        this.$redirectTo('/pages/index/index')
      },
      getVersion() {
        this.$http.get('/common/pad/check').then(res => {
          if (res.status === 0) {
            this.Version = res.data.versionNumber
            console.log(this.Version)
            if (this.Version > this.localVersion) {
              this.$refs.popShare.open()
            }
            this.setSubjectListAsync()
          }

        })
      },
      close(e) {
        let dtask = false
        if (e.confirm) {
          console.log('123')
          if (plus.os.name == 'Android') {
            if (dtask) {
              console.log('下载任务已经存在')
              this.$showToast('下载任务已经存在');
              return;
            }
            //下载文件
            dtask = plus.downloader.createDownload(
              'http://zhenxuepai.zcxiaolian.com:8080/app.apk', {
                method: "GET"
              },
              //下载完成执行的回调函数
              (d, status) => {
                if (status == 200) {
                  this.$showToast("正在安装")
                  // 安装应用
                  plus.runtime.install(d.filename, {}, () => {
                    this.$showModal('', '更新成功,将重启', (result) => {
                      if (!result.cancel) {
                        plus.runtime.restart();
                      }

                    })
                  })
                } else {
                  this.$showToast("下载失败")
                  //下载失败
                  plus.downloader.clear(); //清除下载任务
                }

              })
            // dtask.addEventListener("statechanged", (task,status)=>{
            //        if(!dtask){return;}
            //        switch(task.state) {
            //            case 1: // 开始
            //            console.log("开始下载")
            //            break;
            //            case 2: // 已连接到服务器
            //            console.log("链接到服务器")
            //            break;
            //            case 3:    // 已接收到数据
            //                var progressVal = (task.downloadedSize/task.totalSize)*100;
            //                console.log(`进度:${progressVal}`)
            //                // this.$util.successMsg(`进度:${progressVal}`)
            //            break;
            //        }
            //    },false);
            dtask.start();
          }
        }

      }
    }
  }
</script>

<style lang="scss">
  .container {
    height: 100%;

    .headimg {
      height: px2vh(96);

      image {
        width: px2vw(80);
        height: px2vw(80);
        border-radius: 50%;
      }

    }

    @font-face {
      font-family: 'webfont';
      font-display: swap;
      src: url('@/static/font/webfont.eot');
      /* IE9 */
      src: url('@/static/font/webfont.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('@/static/font/webfont.woff2') format('woff2'),
        url('@/static/font/webfont.woff') format('woff'),
        /* chrome、firefox */
        url('@/static/font/webfont.ttf') format('truetype'),
        /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('@/static/font/webfont.svg#webfont') format('svg');
      /* iOS 4.1- */
    }

    .web-font {
      font-family: "webfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .main {
      height: calc(100vh - var(--status-bar-height) - 8vh);
      // background: url(../../static/index/home_bg.png) no-repeat;
      // background-size: 100% 100%;
      background: url(../../static/index/btright.png) no-repeat right bottom;
      background-size: px2vw(318) px2vw(198);

      .fontimg {
        width: 100vw;
        height: px2vh(425);
        // display: block;
        // margin: auto;
      }

      .homeModel {
        background: url(../../static/index/topleft.png) no-repeat left top;
        background-size: px2vw(318) px2vw(198);
        height: calc(100vh - var(--status-bar-height) - 8vh - 36vh)
      }

      .main_box {
        position: relative;
        margin: px2vw(15) px2vw(15) 0px 0px;

        image {
          width: px2vw(870);
          height: px2vw(260);
        }

        .title {
          position: absolute;
          top: px2vw(100);
          left: px2vw(70);
          height: px2vh(40);
          font-size: px2vw(40);
          font-weight: bold;
          font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
          color: #FFFFFF;
          line-height: px2vh(40);
          z-index: 1;
          box-reflect: below px2vh(5) linear-gradient(transparent, transparent 30%, rgba(0, 0, 0, 0.3));
          -webkit-box-reflect: below px2vh(5) linear-gradient(transparent, transparent 30%, rgba(0, 0, 0, 0.3));
        }
      }
    }
  }
</style>
